const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin');
// DefinePlugin是webpack内置的
const { DefinePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader/dist/index')

module.exports = {
    target: "web",
    // 设置模式
    // development 开发阶段,会设置development
    // production 准备打包上线的时候,设置production
    mode: "development",
    // 建立js映射文件,方便调试代码错误
    devtool: "source-map",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "js/bundle.js"
    },
    devServer: {
        // contentBase: "./public",
        hot: true,
        // proxy: {
        //     "/api": {
        //         target: "http://localhost:8888",
        //         pathRewrite: {
        //             "^/api": ""
        //         },
        //         secure:false,
        //         changeOrigin: true
        //     }
        // }
    },
    // resolve: {
    //     extensions: [".js", ".json", ".mjs", ".vue", ".vue", ".jsx", ".tsx"],
    //     alias: {
    //         "@": path.resolve(__dirname, "./src")
    //     }
    // },
    module: {
        rules: [
            {
                test: /\.css$/,
                // 语法糖
                // loader: "css-loader"

                // 完整的写法
                use: [
                    // {loader: "css-loader"}
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    // require("autoprefixer")
                                    require("postcss-preset-env")

                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            // {
            //     test: /\.(jpg|jpeg|png|gif|svg)$/,
            //     use: {
            //         loader: "file-loader",
            //         options: {
            //             // outputPath: "img",
            //             name: "img/[name]_[hash:6].[ext]"
            //         }
            //     }
            // },
            // {
            //     test: /\.(jpg|jpeg|png|gif|svg)$/,
            //     use: {
            //         loader: "url-loader",
            //         options: {
            //             // outputPath: "img",
            //             name: "img/[name]_[hash:6].[ext]",
            //             limit: 100 * 1024
            //         }
            //     }
            // }

            // 注意：这里这样打包两个图片都可以打开,所以前面应该是版本原因
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                type: "asset",
                generator: {
                    filename: "img/[name]_[hash:6][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024
                    }
                }
            },
            // {
            //     test: /\.(eot|ttf|woff2?)$/,
            //     use: {
            //         loader: "file-loader",
            //         options: {
            //             name: "font/[name]_[hash:6].[ext]"
            //         }
            //     }
            // }
            // 这里使用file-loader又出错了 用下面的方法没有错误 应该是file-loader的问题
            {
                test: /\.(eot|ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    filename: "font/[name]_[hash:6][ext]"
                }
            },
            // {
            //     test: /\.js$/,
            //     use: {
            //         loader: "babel-loader",
            //         options: {
            //             plugins: [
            //                 "@babel/plugin-transform-arrow-functions",
            //                 "@babel/plugin-transform-block-scoping"
            //             ],
            //             // presets: [
            //             //     "babel/preset-env"
            //             //可能需要安装相应插件
            //             // ]
            //         }
            //     }
            // }
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                }
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ] 
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
            // title: 'abc'
        }),
        new DefinePlugin({
            BASE_URL: " './' ",
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS_: false
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'public',
                    to: './',
                    globOptions: {
                        ignore: [
                            "**/index.html"
                        ]
                    }
                }
            ]
        }),
        new VueLoaderPlugin()
    ]
} 